<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const questions = ref([])

const fetchQuestions = async () => {
  try {
    const response = await axios.get('/api/questions')
    questions.value = response.data || []
    console.log('成功获取题目:', questions.value)
  } catch (error) {
    console.error('获取题目失败:', error)
    questions.value = []
  }
}

onMounted(() => {
  fetchQuestions()
})
</script>

<template>
  <div class="question-input">
    <h2>题目列表</h2>
    <div v-if="questions.length > 0">
      <ul>
        <li v-for="(question, index) in questions" :key="question.id">
          {{ index + 1 }}. {{ question.content }}
        </li>
      </ul>
    </div>
    <div v-else>
      <p>暂无题目数据</p>
    </div>
  </div>
</template>

<style scoped>
.question-input {
  padding: 20px;
}
</style>